<template>
    <div class="letter">
        <div class="sort">
            <ul>
                
                <router-link to="/comment">
                    <li><a href="###" class="iconfont">&#xe6bc;评论</a></li>
                </router-link>
                
                <router-link to="/click">
                    <li><a href="###" class="iconfont">&#xe677;喜欢</a></li>
                </router-link>
                
                <router-link to="/focus">
                    <li><a href="###" class="iconfont">&#xe63f;粉丝</a></li>
                </router-link>
                
                <router-link to="/letter">
                    <li  class="active"><a href="###" class="iconfont active">&#xe637;私信</a> <i style="color:#26a2ff;font-size:1rem;" v-if="!this.login">{{this.list.length}}</i></li>
                </router-link>
                
            </ul>
        </div>

        <div class="login" v-show="login">
            <a href="/#/login">还未登录，请先登录！</a>
        </div>

        <div class="main" ref="Wrapper" v-show="show1">
          <ul>
            <li v-show="isdel[index]" v-for="(item,index) in list" :key="item.index"> 
                <router-link :to='"/userdetails/" + item.user.id'>
                <img :src="item.user.photo" alt="">
                </router-link>
                <div class="message">
                    <router-link :to='"/userdetails/" + item.user.id'>
                      <p class="p"><a href="###">{{item.user.name}}</a></p>
                    </router-link>
                    <router-link :to='"/sendmess/" + item.user.id'>
                    <div @click="get(index)">
                        <p class="content" v-html="item.chat.message">{{item.chat.message}}</p>
                        <p>{{item.chat.time.slice(0,10)}} {{item.chat.time.slice(11,19)}}</p>
                    </div>
                    </router-link>
                </div>
                <div class="icon"  @mouseover="flow(index)" @mouseleave="flowout(index)">
                    <a href="###" class="iconfont" title="置顶"  v-show="show[index]">&#xe670;</a>
                    <a href="###" class="iconfont" title="删除"  v-show="show[index]" @click="del(index)">&#xe620;</a>
                </div>
            </li>

          </ul>
        </div>

        <div class="mark"  v-show="isshow">
            <p>确定删除？</p>
            <span><a href="###" @click="no()">取消</a></span>
            <span><a href="###" @click="dele()">确定</a></span>
        </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
import BScroll from 'better-scroll'
import {EventBus} from '../../../../../../static/js/eventBus'
export default {
    name: 'letter',
    data () {
        return {
            show: [],
            show1: false,
            isshow: false,
            isdel: [],
            login: true,
            list: [],
            index: '',
            sendindex: ''
        }
    },

    mounted () {
        this.$nextTick(() => {
          // 解决移动端因vue数据更新异步而无法滚动的问题
          this.scroll = new BScroll(this.$refs.Wrapper, {
            click:true, //设置click参数，使单句歌词可点击
            adjustTime: 350, // 拉动之后的返回时间，默认400
            mouseWheel: true,
          })
        })
    },

    methods: {
        flow (index) {
          this.show[index] = !this.show[index]
          let newItem = this.show[index]
          Vue.set(this.show, index, newItem)
        },

        flowout (index) {
          this.show[index] = !this.show[index]
          let newItem = this.show[index]
          Vue.set(this.show, index, newItem)
        },

        del (index) {
            this.isshow = true
            this.index = index
        },

        no () {
            this.isshow = false
        },

        dele () {
          this.isshow = false
          // this.isdel = false
          this.isdel[this.index] = !this.isdel[this.index]
          let newItem = this.isdel[this.index]
          Vue.set(this.isdel, this.index, newItem)
        },

        get (index) {
          this.sendindex = index
        }
        
    },

    created () {
      //   EventBus.$on('send',(list) => {
      //     this.list = list;
      //   })

      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.login = false
            this.show1 = true
          }
        } 

      })

      axios.post(`/api/messageNotice`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          console.log(this.list)
          for (var i = 0;i < this.list.length; i++) {
            this.isdel.push(true) 
            this.show.push(false)
          }
        } 

      })

    },

    destroyed () {
      // sendmess接收数据
      EventBus.$emit('sendletter',this.list[this.sendindex].user);

    }
}
</script>

<style lang="stylus" scoped>
.letter
  width 100%
  height auto
  margin-top 5.5rem
  position relative
  // background-color skyblue
  .login
    width 76%
    line-height 38rem
    left 20%
    top 0rem
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff
  .sort
    width 16%
    height auto
    margin-bottom 2rem
    padding-bottom 2rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      width 100%
      height auto
      padding-bottom 2rem
      //background-color red
      li 
        width 100%
        line-height 5rem
        margin-top 3rem
        text-align center
        // background-color skyblue
      li:hover
        background-color #eee
    .active
        background-color #eee
        color #26a2ff 
  .main
    width 76%
    height 38rem
    overflow hidden
    left 20%
    top 0rem
    position absolute
    background-color #fff
    ul
      width 100%
      height auto
      padding-top 1rem
      padding-bottom 1rem
      li
        width 90%
        line-height 5rem
        margin-top 1rem
        margin-left 5%
        position relative
        border .05rem #eee solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        // background-color red
        img 
          height 4rem
          width 4rem
          border-radius 50%
          margin-left 4%
        .message
          width 60%
          height 5rem
          position absolute
          top 0rem
          left 13%
          // background-color red
          .p
            width 20%
            line-height 1rem
            margin-top 1rem
            font-size .8rem
            // background-color red
            a
              color #26a2ff
          div
            width 100%
            height 3rem
            margin-top .5rem
            // background-color skyblue
            p
              width 80%
              line-height 1rem
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
              font-size .7rem
            .content
              font-size .9rem
        .icon
          width 27%
          height 5rem
          left 73%
          top 0rem
          position absolute
          // background-color skyblue
          a
            margin-left 30%
            font-size 1.6rem
  .talk
    width 76%
    height 38rem
    overflow hidden
    left 20%
    top 0rem
    position absolute
    background-color #fff
    .p
      width 100%
      text-align center
      line-height 3.5rem
      font-size 1rem
      position relative
      border-bottom .05rem #ccc solid
      // background-color red
      span
        width 5%
        line-height 3.5rem
        position absolute
        left 0rem
        font-size 2rem
        // background-color #fff
    img
      height 3rem
      border-radius 50%
      margin-left -10%
    .body
      width 100%
      height 31rem
      overflow hidden
      // background-color red
      ul
        width 100%
        height auto
        // background-color skyblue
        li
          width 52%
          height auto
          padding .5rem
          position relative
          // background-color red
          img
            // height 3rem
            position absolute 
            border-radius 50%   
            margin-left .5rem
            margin-top 0rem
            // margin-bottom .5rem
          div
            height auto
            margin-left 13%
            line-height 1.2rem
            padding .5rem
            font-size .8rem
            border .05rem #eee solid
            border-radius 10px
            box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
            background-color #fff
          p
            margin-left 14%
            margin-top .3rem
        .right
          width auto
          height auto
          margin-left 39%
          padding .5rem
          position relative
          //   background-color red
          img
            position absolute 
            border-radius 50%   
            right 1rem
            top 0rem
            margin-left 2%
            // margin-bottom .5rem
          div
            height auto
            margin-right 11%
            text-indent right
            line-height 1.2rem
            padding .5rem
            font-size .8rem
            border .05rem #eee solid
            border-radius 10px
            box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
            background-color #fff
  .input
    width 100%
    line-height 2.8rem
    border-top .05rem #ccc solid
    // background-color red
    input 
      width 70%
      line-height 1.8rem
      margin-left 8%
      text-indent 1rem
      font-size .8rem
      border .05rem #333 solid
      margin-top -.3rem
    span 
      line-height 3rem
      margin-left 5%
      padding .4rem 1rem
      font-size 1rem
      border .05rem #eee solid
      border-radius 10px
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      background-color skyblue
    span:hover
      background-color #26a2ff
      a
        color #fff
  .mark
    width 20%
    height 8rem
    position absolute 
    top 6rem
    left 45%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    p
      width 100%
      line-height 3rem
      font-size 1.2rem
      text-align center
      margin-top .5rem
      //   background-color #fff
    span 
      line-height 4rem
      padding .8rem
      margin-left 20%
      font-size .8rem
      background-color #fff
</style>